<template><div><h2 id="浏览器如何发送网络请求" tabindex="-1"><a class="header-anchor" href="#浏览器如何发送网络请求"><span>浏览器如何发送网络请求</span></a></h2>
<h3 id="使用原生ajax发送请求" tabindex="-1"><a class="header-anchor" href="#使用原生ajax发送请求"><span>使用原生ajax发送请求</span></a></h3>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>前端几种网络请求方式&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">> </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    // 原生ajax</span></span>
<span class="line"><span style="color:#C678DD">    const</span><span style="color:#E5C07B"> xhr</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> XMLHttpRequest</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">    xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">onreadystatechange</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#C678DD">      if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">readyState</span><span style="color:#56B6C2"> ===</span><span style="color:#D19A66"> 4</span><span style="color:#56B6C2"> &#x26;&#x26;</span><span style="color:#E5C07B"> xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">status</span><span style="color:#56B6C2"> ===</span><span style="color:#D19A66"> 200</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">        document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">body</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">innerHTML</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">responseText</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">      }</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#E5C07B">    xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">open</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'get'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'http://192.168.50.172:8888/test/get'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">    xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">send</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h3 id="使用jquery" tabindex="-1"><a class="header-anchor" href="#使用jquery"><span>使用jquery</span></a></h3>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>前端几种网络请求方式&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"http://code.jquery.com/jquery-latest.js"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script> </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    // 原生ajax</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    const xhr = new XMLHttpRequest();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.onreadystatechange = function () {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      if (xhr.readyState === 4 &#x26;&#x26; xhr.status === 200) {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        document.body.innerHTML = xhr.responseText;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.open('get', 'http://192.168.50.172:8888/test/get');</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.send();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;/script> --></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    // jquery</span></span>
<span class="line"><span style="color:#E5C07B">    $</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">get</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"http://192.168.50.172:8888/test/get"</span><span style="color:#ABB2BF">,{},</span><span style="color:#C678DD">function</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">res</span><span style="color:#ABB2BF">){</span><span style="color:#E5C07B">document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">body</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">innerHTML</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75"> res</span><span style="color:#ABB2BF">;})</span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h3 id="使用axios" tabindex="-1"><a class="header-anchor" href="#使用axios"><span>使用axios</span></a></h3>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>前端几种网络请求方式&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script src="http://code.jquery.com/jquery-latest.js">&#x3C;/script> --></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"https://unpkg.com/axios/dist/axios.min.js"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script> </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    // 原生ajax</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    const xhr = new XMLHttpRequest();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.onreadystatechange = function () {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      if (xhr.readyState === 4 &#x26;&#x26; xhr.status === 200) {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        document.body.innerHTML = xhr.responseText;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.open('get', 'http://192.168.50.172:8888/test/get');</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.send();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;/script> --></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    // jquery</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    $.get("http://192.168.50.172:8888/test/get",{},function(res){document.body.innerHTML = res;})</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;/script> --></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E5C07B">    axios</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">get</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"http://192.168.110.115:8888/test/get"</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">then</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">resp</span><span style="color:#C678DD">=></span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#E5C07B">      document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">body</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">innerHTML</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> resp</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">data</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">    });</span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h3 id="使用fetch" tabindex="-1"><a class="header-anchor" href="#使用fetch"><span>使用fetch</span></a></h3>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>前端几种网络请求方式&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script src="http://code.jquery.com/jquery-latest.js">&#x3C;/script> --></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script src="https://unpkg.com/axios/dist/axios.min.js">&#x3C;/script> --></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script> </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    // 原生ajax</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    const xhr = new XMLHttpRequest();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.onreadystatechange = function () {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      if (xhr.readyState === 4 &#x26;&#x26; xhr.status === 200) {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        document.body.innerHTML = xhr.responseText;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.open('get', 'http://192.168.50.172:8888/test/get');</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    xhr.send();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;/script> --></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    // jquery</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    $.get("http://192.168.50.172:8888/test/get",{},function(res){document.body.innerHTML = res;})</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;/script> --></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;!-- &#x3C;script></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    axios.get("http://192.168.110.115:8888/test/get").then(resp=>{</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      document.body.innerHTML = resp.data;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    });</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">  &#x3C;/script> --></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#61AFEF">    fetch</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"http://192.168.110.115:8888/test/get"</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#ABB2BF">      .</span><span style="color:#61AFEF">then</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">resp</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">        resp</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">text</span><span style="color:#ABB2BF">().</span><span style="color:#61AFEF">then</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">data</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> { </span><span style="color:#7F848E;font-style:italic">// 将返回体转成txt，拿到数据</span></span>
<span class="line"><span style="color:#E5C07B">          document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">body</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">innerHTML</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75"> data</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        });</span></span>
<span class="line"><span style="color:#ABB2BF">      });</span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h2 id="浏览器网络行为api" tabindex="-1"><a class="header-anchor" href="#浏览器网络行为api"><span>浏览器网络行为api</span></a></h2>
<ul>
<li>XMLHttpRequest</li>
</ul>
<blockquote>
<p>古老的一个api，用于在浏览器和服务器之间发送http请求,jquery和axios底层都是封装了这个api</p>
</blockquote>
<ul>
<li>Fetch</li>
</ul>
<blockquote>
<p>比较新的api，使用promise实现了发送ajax请求</p>
</blockquote>
<ul>
<li>Beacon</li>
</ul>
<blockquote>
<p>介绍：navigator.sendBeacon() 方法允许异步地发送少量数据到服务器，通常用于在页面卸载时发送分析或诊断信息。这个方法确保数据发送成功，即使页面已经关闭或用户已经导航到其他页面。 没咋用过</p>
</blockquote>
<ul>
<li>WebSocket</li>
</ul>
<blockquote>
<p>实现浏览器和服务器之间全双工通信</p>
</blockquote>
<ul>
<li>Server-Sent Events</li>
</ul>
<blockquote>
<p>基于http协议,允许服务器主动向浏览器推送数据</p>
</blockquote>
<ul>
<li>WebRTC</li>
</ul>
<blockquote>
<p>WebRTC 主要用于实时音频、视频和数据通信，但它也可以用于在浏览器之间建立点对点（peer-to-peer）的连接，并通过这些连接发送数据。 没咋用过</p>
</blockquote>
<ul>
<li>XMLHttpRequest Level 2</li>
</ul>
<blockquote>
<p>相比于老的XMLHttpRequest，引入了formdata和blob对象以及其他的一些新功能</p>
</blockquote>
<ul>
<li>WebTransport</li>
</ul>
<blockquote>
<p>http3新引入webapi，专门用于http3</p>
</blockquote>
<blockquote>
<p>案例查看：https://juejin.cn/post/7427265723947237376<br>
https://developer.mozilla.org/zh-CN/docs/Web/API/WebTransport</p>
</blockquote>
<h2 id="jquery和axios做了那些事情" tabindex="-1"><a class="header-anchor" href="#jquery和axios做了那些事情"><span>jquery和axios做了那些事情</span></a></h2>
<p>jquery对原生的XMLHttpRequest对象进行了封装，而axios则使用Promise对象实现的ajax。</p>
<blockquote>
<p>我觉得最主要的区别就是这个了，现在用axios还是比较好的。</p>
</blockquote>
<h2 id="实验" tabindex="-1"><a class="header-anchor" href="#实验"><span>实验</span></a></h2>
<p>用浏览器操作网络的基本对象，写一个demo，用于读取与操作上次作业中的sse接口与中断接口，并编写一个js函数，用于主动断开与服务端网络链接</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>Document&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"btn"</span><span style="color:#ABB2BF">>点击我断开连接&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#E5C07B"> sse</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> EventSource</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'http:localhost:3000/getNumbers'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        sse</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'message'</span><span style="color:#ABB2BF">, (</span><span style="color:#E06C75;font-style:italic">e</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">            document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">body</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">insertAdjacentHTML</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'beforeend'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'&#x3C;br/>'</span><span style="color:#56B6C2">+</span><span style="color:#E5C07B">e</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">data</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">        })</span></span>
<span class="line"><span style="color:#E5C07B">        document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">querySelector</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'#btn'</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">onclick</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#E5C07B"> xhr</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> XMLHttpRequest</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">            xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">onreadystatechange</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#C678DD">                if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">readyState</span><span style="color:#56B6C2"> ===</span><span style="color:#D19A66"> 4</span><span style="color:#56B6C2"> &#x26;&#x26;</span><span style="color:#E5C07B"> xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">status</span><span style="color:#56B6C2"> ===</span><span style="color:#D19A66"> 200</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                    document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">body</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">insertAdjacentHTML</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'beforeend'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'&#x3C;br/>'</span><span style="color:#56B6C2">+</span><span style="color:#E5C07B">xhr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">responseText</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">                }</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#E5C07B">            xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">open</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'post'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'http://localhost:3000/stopGetNumbers'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">            xhr</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">send</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">            sse</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">close</span><span style="color:#ABB2BF">(); </span><span style="color:#7F848E;font-style:italic">// 主动关闭前端连接，否则一直会向后端发轮询</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>SSEController</p>
<div class="language-java line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="java" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">package</span><span style="color:#C678DD"> xyz.hmz.backend.controller</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.http.MediaType</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.CrossOrigin</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.GetMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.PostMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.RestController</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.servlet.mvc.method.annotation.SseEmitter</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> java.io.IOException</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> java.util.concurrent.atomic.AtomicBoolean</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Author haomingze</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Date 2025/3/17 15:51</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @description:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> */</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">RestController</span></span>
<span class="line"><span style="color:#C678DD">public</span><span style="color:#C678DD"> class</span><span style="color:#E5C07B"> SseController</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">    private</span><span style="color:#C678DD"> static</span><span style="color:#E5C07B"> AtomicBoolean</span><span style="color:#E06C75"> isStop </span><span style="color:#56B6C2">=</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> AtomicBoolean</span><span style="color:#E06C75">(</span><span style="color:#D19A66">false</span><span style="color:#E06C75">)</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">CrossOrigin</span><span style="color:#E06C75">(</span><span style="color:#98C379">"*"</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">GetMapping</span><span style="color:#E06C75">(</span><span style="color:#D19A66">value</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "/getNumbers"</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">produces</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> MediaType</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">TEXT_EVENT_STREAM_VALUE</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> SseEmitter</span><span style="color:#61AFEF"> getNumbers</span><span style="color:#ABB2BF">()</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">        SseEmitter</span><span style="color:#E06C75"> emitter</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> SseEmitter</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">        isStop</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">set</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">false</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">        new</span><span style="color:#61AFEF"> Thread</span><span style="color:#ABB2BF">(()</span><span style="color:#C678DD">-></span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#E5C07B">            Integer</span><span style="color:#E06C75"> number</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> Integer</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">            while</span><span style="color:#ABB2BF">(number</span><span style="color:#56B6C2">&#x3C;=</span><span style="color:#D19A66">100</span><span style="color:#56B6C2"> &#x26;&#x26;</span><span style="color:#56B6C2"> !</span><span style="color:#E5C07B">isStop</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">get</span><span style="color:#ABB2BF">()){</span></span>
<span class="line"><span style="color:#C678DD">                try</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">                    emitter</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">send</span><span style="color:#ABB2BF">(number++);</span></span>
<span class="line"><span style="color:#E5C07B">                    Thread</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">sleep</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">200</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">                } </span><span style="color:#C678DD">catch</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">IOException</span><span style="color:#ABB2BF">|</span><span style="color:#E5C07B">InterruptedException</span><span style="color:#E06C75;font-style:italic"> e</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                    emitter</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">complete</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#C678DD">                    return</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">                }</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#E5C07B">            emitter</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">complete</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#ABB2BF">        }).</span><span style="color:#61AFEF">start</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#C678DD">        return</span><span style="color:#ABB2BF"> emitter;</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">CrossOrigin</span><span style="color:#E06C75">(</span><span style="color:#98C379">"*"</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">PostMapping</span><span style="color:#E06C75">(</span><span style="color:#98C379">"/stopGetNumbers"</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> String</span><span style="color:#61AFEF"> stopGetNumbers</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">        isStop</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">set</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">        return</span><span style="color:#98C379"> "断开连接成功"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><blockquote>
<p>参考<br>
https://blog.csdn.net/qq_45585640/article/details/122728992<br>
https://blog.csdn.net/sinat_34896766/article/details/138579225<br>
https://juejin.cn/post/7427265723947237376</p>
</blockquote>
</div></template>


